<template>
  <div class="gameList">
    <div class="title">
      <div class="f-left" v-if="imgArr">{{imgArr.TypeName}}</div>
      <!-- <router-link tag="div" :to="path" class="f-right">查看全部</router-link> -->
      <!-- <div class="f-right">查看全部</div> -->
    </div>
    <div class="content" ref="content">
      <div class="slideBoxList" :style="{width:slideBoxListWidth}" v-if="imgArr" ref="slideBoxList">
        <div
          class="item"
          v-for="(item,index) in imgArr.GameAarry"
          :key="index"
          @click="seeDetail(item)"
        >
          <img :src="item.IconUrl" alt>
          <span>{{item.GameName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { downloadApp } from "../../../utils/index";
import { telephoneFees } from "../../../api";
import { getGuid, openUrl } from "@/utils/index";
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      zyphone: ""
    };
  },
  props: {
    path: "",
    imgArr: {},
    id: localStorage.zyUserId
  },
  computed: {
    slideBoxListWidth() {
      //1.68rem  每个item的宽度
      return this.imgArr.GameAarry.length * 1.68 + "rem";
    },
    ...mapGetters(["user", "imgStr"])
  },
  mounted() {
    this.chargeTelephoneFees();
    setTimeout(() => {
      var listBox = this.$refs.content;
      var scroll = new BScroll(listBox, {
        scrollX: true,
        scrollY: false,
        click: true,
        eventPassthrough: "vertical"
      });
    }, 300);
  },
  methods: {
    chargeTelephoneFees() {
      telephoneFees({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        YJELQss: 0
      }).then(res => {
        if (res.data.Success) {
          // console.log(res.data.Content);
          this.zyphone = res.data.Content;
          localStorage.zyphone = res.data.Content;
        } else {
          // Toast({
          //   message: res.data.Content,
          //   duration: 3000
          // });
        }
      });
    },
    seeDetail(item) {
      if (!localStorage.zyUserId) {
        MessageBox.confirm("去登录?").then(action => {
          this.$router.push("/login");
        });
        return;
      }
      let userData = JSON.parse(localStorage.zyUserData);
      console.log(userData);
      let url = item.DownLoadUrl;
      let gameId = userData.GameID;
      let userid = userData.UserID;
      let password = localStorage.zyPassword;
      let score = userData.Gold;
      let NickName = userData.NickName;
      let TxIMG = this.user.TxImg
        ? this.imgStr + this.user.TxImg
        : "http://www.912cc.com/JYEIcon/TxIcon/morentouxiang.png";

      let isMemberOrder = userData.MemberOrder == "5" ? true : false;
      this.zyphone = localStorage.zyphone;
      // console.log(this.zyphone);

      // console.log("url" + url);
      // console.log("gameId" + gameId);
      // console.log("userid" + userid);
      // console.log("password" + password);
      // console.log("score" + score);
      // console.log("NickName" + NickName);
      // console.log("TxIMG" + TxIMG);
      if (!url) return;
      if (!gameId) {
        Toast({
          message: "游戏链接失败，请重试",
          duration: 3000
        });
        return;
      }
      if (!userid) {
        Toast({
          message: "游戏链接失败，请重试",
          duration: 3000
        });
        return;
      }
      if (!TxIMG) {
        Toast({
          message: "游戏链接失败，请重试",
          duration: 3000
        });
        return;
      }
      if (!this.zyphone) {
        Toast({
          message: "游戏链接失败，请重试",
          duration: 3000
        });
        return;
      }

      if (item.Sfhy == "1" && !isMemberOrder) {
        Toast({
          message: "付费游戏，仅对会员用户开放",
          duration: 3000
        });
        return;
      }

      //IsOurGame == 0 是原生 1不是
      if (item.IsOurGame == "1") {
        // GameID=123456 &Account=我是宝宝 & Password= x2mlBdXfQs7v+5+BzBaKnvlmQiM737h& KindID=361 TxIMG(用户头像)这五个即可
        // account的值是昵称；不是账号
        openUrl(
          `${url}?GameID=${gameId}&Password=${password}&Account=${NickName}&TxIMG=${TxIMG}&KindID=${
            item.KindID
          }`,
          "_bank"
        );
      } else {
        openUrl(
          `${url}?gameid=${gameId}&userid=${userid}&password=${password}&score=${score}&accounts=${
            this.zyphone
          }&nickname=${NickName}`,
          "_bank"
        );
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.gameList {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #E6E6E6;

  .title {
    height: 0.48rem;
    line-height: 0.48rem;
    color: #000;
    font-family: 'PingFang-SC-Bold';
    font-weight: bold;
    margin-top: 10px;

    .f-left {
      float: left;
      font-size: 15px;
    }

    .f-right {
      float: right;
      font-size: 14px;
      color: #1089FF;
      font-weight: 400;
      margin-right: 0.12rem;
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 0.15rem;

    .slideBoxList {
      width: 11.2rem;

      .item {
        width: 1.54rem;
        float: left;
        margin-right: 0.14rem;
        position: relative;
        text-align: center;
        margin-top: 15px;

        img {
          width: 100%;
          height: 1.52rem;
        }

        span {
          margin-top: 0.16rem;
          display: block;
          font-size: 12px;
        }
      }
    }
  }
}
</style>


